環境、軟體與外掛

• 環境: Node.js
• 軟體: VS Code
• Extension: Live Server, Live Sass Compiler ( remove extension made by Ritwick Dey and install extension made by Glenn Marks)

Sass 編譯方式

1. 軟體編譯
2. gulp, webpack 前端任務 等打包工具
3. 編輯器內建的 Extension: Live Server, Live Sass Compiler
4. 軟體編譯如 prepos

   小型專案可使用，大型不適用。

VSCode - Live Sass Compiler

"liveSassCompile.settings.formats": [
    {
	  // 每支CSS會轉譯成兩個檔案: 未壓縮 expanded、壓縮	compressed
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/style"
    },
    {
      "extensionName": ".min.css",
      "format": "compressed",
      "savePath": "/dist/style"
    }
  ],
  // 要排除(不轉譯)的檔案	
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
  ],
  // 看自己有沒有用到，沒有用到就改成 false	， css 和 scss 做對應。
  "liveSassCompile.settings.generateMap": true,

  // 非常重要的 - autoprefix - 瀏覽器市占率要大於1%，要支援最新的兩個版本，只要符合以下條件，就會做 autoprefixer。	   
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
  ],

postcss / autoprefixer

https://github.com/postcss/autoprefixer

SASS vs. SCSS

SCSS: all valid CSS is valid SCSS as well

SASS Variable - 變數格式

適合做成變數的屬性: 顏色、文字、行距

1. Number: 10, 1px, 3em
2. String: 'Single quotation marks', "Double quotation marks"
3. Color: red, #000000, rgba(255,255,255,0.2);
4. Boolean: true, false
5. Null: null
6. 支援運算: (1em + 1em, 6px*2)

SASS(SCSS) 資料夾結構

https://www.sitepoint.com/architecture-sass-project/

sass/ 
| 
|– base/ 
|   |– _reset.scss       # Reset/normalize 
|   |– _typography.scss  # Typography rules 
|   ...                  # Etc… 
| 
|– components/ 
|   |– _buttons.scss     # Buttons 
|   |– _carousel.scss    # Carousel 
|   |– _cover.scss       # Cover 
|   |– _dropdown.scss    # Dropdown 
|   |– _navigation.scss  # Navigation 
|   ...                  # Etc… 
| 
|– helpers/ 
|   |– _variables.scss   # Sass Variables 
|   |– _functions.scss   # Sass Functions 
|   |– _mixins.scss      # Sass Mixins 
|   |– _helpers.scss     # Class & placeholders helpers 
|   ...                  # Etc… 
| 
|– layout/ 
|   |– _grid.scss        # Grid system 
|   |– _header.scss      # Header 
|   |– _footer.scss      # Footer 
|   |– _sidebar.scss     # Sidebar  
|   |– _forms.scss       # Forms 
|   ...                  # Etc… 
| 
|– pages/ 
|   |– _home.scss        # Home specific styles 
|   |– _contact.scss     # Contact specific styles 
|   ...                  # Etc… 
| 
|– themes/ 
|   |– _theme.scss       # Default theme 
|   |– _admin.scss       # Admin theme 
|   ...                  # Etc… 
| 
|– vendors/ 
|   |– _bootstrap.scss   # Bootstrap 
|   |– _jquery-ui.scss   # jQuery UI 
|   ...                  # Etc… 
| 
| 
`– main.scss             # primary Sass file

The 7-1 Pattern

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

Get your stylesheets more organized with Sass partials

sass/ 
|– abstracts/
|   |– _breakpints.scss  # 
|   |– _colors.scss  	 # Color rules 
|   |– _functions.scss   # 
|   |– _index.scss       #
|   |– _mixins.scss   	 # 
|   |– _type.scss  	     # 

|– base/ 
|   |– _base.scss        # 
|   |– _font-face.scss        # 
|   |– _index.scss       #  
|   |– _reset.scss       # Reset/normalize, base style 
|   |– _root.scss       #  
|   |– _typography.scss  # Typography rules 
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _article.scss      # Aritle
|   |– _label.scss        # Label
|   |– _dropdown.scss     # Dropdown
|   |– _nav.scss          # Navigation
|   |– _index.scss       # 
|
|– layout/  
|   |– _home.scss  	 #  
|   |– _index.scss       #  @forward "grid";
|   |– _grid_.scss       #  display: grid;
|
|– utilities/ 
|   |– _color-utilities.scss      # 
|   |– _container.scss  # 
|   |– _flow.scss       #  
|   |– _index.scss       #  




– main.scss              # Main Sass file 
						 # @use base, utilities, components, and layouts

custom sass structure

sass/ 
| 
|– global/ 
|   |– _reset.scss       # Reset/normalize, base style 
|   |– _typography.scss  # Typography rules 
|   |– _colors_.scss  	 # Color rules 
|   |– _index.scss       #  
| 
|– util/ 
|   |– _fonts_.scss      # font family from google font
|   |– **_typography**.scss  # 
|   |– _index.scss       #  
|– layout/  
|   |– _index.scss       #  @forward "grid";
|   |– _grid_.scss       #  display: grid;

在新建的scss檔案夾中新建一個.scss檔案

$base-color: #008000;
$link-color: #000;
$font-m: 16px - 3px;
$font-l: 18px;
//$font-l: $font-m * 1.2;
$font-family-base: "Noto Sans, sans-serif";
$font-family-title: "monospace";
	
body {
	font-family: $font-family-base;
}


.header a {
	font-size: $font-m; // 會解析成 13px
	width: 500px;
	color: $link-color;
}

.header h1 {
	font-size: $font-l;
}

.content a {
	color: $link-color;
}

.content h2 {
	$font-family-title;
}

Nesting

比較像 wireframe 的 dom 結構
>會比空白鍵的 後代選取器 效能來得比較高

Comment

|– dist/                       # production 上線區域
|- css/                        # develop 測試區域
|    |- main.css
|- scss/                       # 工作區域
|    |– main.scss             # primary Sass file
|
| 

// 雙斜線 : 註解不會轉譯，適合給自己的註解  

// main.scss

@import "base/reset";
// html {
//   margin: 0;
//   padding: 0;
// }
 

  

.tab-list {
  >header {
    ul {
      list-style: none;
      font-size: 0px;
    }

    li {
      display: inline-block;
      //width: $width / $buttonNumber;
      // Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

      // Breaking Change: Slash as Division: https://sass-lang.com/documentation/breaking-changes/slash-div

      width: math.div($width, $buttonNumber); // Compilation Error: There is no module with the namespace "math".
      //add @use 'sass:math';  at the top of the file.
      //width: calc(100%/6); // 非sass 寫法 為 css 寫法
      font-size: 16px;

    }

  }

}

• calc() - CSS: Cascading Style Sheets | MDN 在舊版IE上會有些問題

/* */ 這個會增加css大小 或是要給工程師或上線版本會需要看的註解

/* main.css */

.tab-list > header ul {
  list-style: none;
  font-size: 0px;
}

.tab-list > header li {
  display: inline-block;
  width: 16.6666666667%;
  font-size: 16px;
}

參考資源

1. Sass Tutorial for Beginners - CSS With Superpowers

GitHub - Project Code
codeSTACKr

2. Alex 宅幹嘛 👨‍💻從 CSS 到 SASS (SCSS) 超入門觀念引導
3. Sass, BEM, & Responsive Design (4 hr beginners course)
4. Sass: Sass Basics